<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旅梦友友</title>
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> -->
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .information {
      margin-bottom: 20px;
    }

    h1 {
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    .table th,
    .table td {
      padding: 10px;
      text-align: center;
      border: 1px solid #dddddd;
    }

    .table th {
      background-color: #f2f2f2;
    }

    .send {
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      font-weight: bold;
    }

    #questionInput {
      width: 100%;
      padding: 10px;
      font-size: 14px;
    }

    .btn-default {
      background-color: #007bff;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }

    .btn-default:hover {
      background-color: #0056b3;
    }

    .answer {
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="information">
      <h1>AI能力驱动的userData</h1>
      <table class="table table-striped" id="user_table">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>家乡</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>1</td>
            <td>代童</td>
            <td>赣州</td>
          </tr>
          <tr>
            <td>2</td>
            <td>罗昭发</td>
            <td>赣州</td>
          </tr> -->
        </tbody>
      </table>

      <div class="send">
        <form name="aiForm" method="get" action="http://www.baidu.com">
          <div class="form-group">
            <label for="questionInput">向AI助理提问</label>
            <input type="text" name="question" class="form-control" id="questionInput" placeholder="请输入你想问的users相关问题">
          </div>
          <button type="submit" class="btn btn-default">提交</button>
        </form>
      </div>

      <div class="answer" id="message"></div>
    </div>
  </div>



  <script>

    const oBody = document.querySelector("#user_table tbody");

    let usersData = [];
    console.log(oBody);

    fetch('http://localhost:3000/users')
      .then(data => data.json())
      .then(users => {
        usersData = users;
        console.log(usersData);
        // console.log(users);
        oBody.innerHTML = users.map(user => `
          <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.hometown}</td>
          </tr>
        `).join("");
      })


    const oMessage = document.querySelector("#message");
    const oForm = document.forms['aiForm'];
    oForm.addEventListener('submit', function (event) {
      // 阻止表单默认提交行为
      event.preventDefault();
      // name 属性去找 性能更好
      const question = this["question"].value.trim();
      // console.log(question);
      // 网站与AI结合  简易版AI全栈开发
      if (question) {
        //JSON.stringify(usersData) 对象序列化
        fetch(`http://localhost:8888/users?question=${question}&users=${JSON.stringify(usersData)}`)
          .then(data => data.json())
          .then(res => {
            console.log(res);
            document.querySelector("#message").innerHTML = res.message;
          })
      }
    })
  </script>
</body>

</html>